<template>
  <div class="container">
    <div class="header">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号:" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="员工姓名:" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别:" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="1">男性</el-radio>
            <el-radio label="0">女性</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号:" prop="idNumber">
          <el-input v-model="ruleForm.idNumber"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <el-button @click="cancel">返回</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
    </div>
  </div>
</template>

<script>
import { getEmployeeById, addEmployee, updateEmployee } from "@/api/employee";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        name: "",
        phone: "",
        sex: "1",
        idNumber: "",
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号！",
            trigger: "blur",
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        idNumber: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            pattern: /^\d{17}[\dXx]$/,
            message: "身份证号码不正确",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    isEdit() {
      return this.$route.query.isEdit === "1";
    },
    id() {
      return this.$route.query.id;
    },
  },
  created() {
    if (this.isEdit) {
      getEmployeeById(this.id).then((res) => {
        this.ruleForm = res.data;
      });
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            updateEmployee(this.ruleForm).then((res) => {
              this.$message.success("编辑成功");
              this.$router.push("/employee");
            });
          } else {
            addEmployee(this.ruleForm).then((res) => {
              this.$message.success("新增成功");
              this.$router.push("/employee");
            });
          }
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.$router.push("/employee");
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30px;
  .header {
    display: flex;
    .el-input {
      width: 250px;
      i {
        cursor: pointer;
      }
    }
  }
  .el-form {
    margin-top: 20px;
    margin-left: 100px;
  }
  .footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
